<template>
	 <picker :class="classname" :disabled="disabled" :range-key="name_key" @change="change" :value="checkIndex" :range="range_list" :placeholder="placeholder">
	 	{{checkIndex!==null&&range_list[checkIndex]?range_list[checkIndex][name_key]:'请选择'}}
	 </picker>
</template>

<script>
	export default {
		data() {
			return {
				range_list:[],
				checkIndex:null,
			}
		},
		props:{
			options:{
				type:Array,
				default:[],
			},
			value:{
				type:[String,Number],
				default:null,
			},
			value_key:{
				type:String,
				default:'value'
			},
			name_key:{
				type:String,
				default:'name'
			},
			disabled:{
				type:Boolean,
				default:false
			},
			placeholder:{
				type:String,
				default:'请选择'
			},
			classname:{
				type:String,
				default:''
			}
		},
		watch:{
			'options':{
				handler(newV,oldV){
					
					if(newV&&newV.length>0){
						this.range_list = newV.map(i=>{
							return {
								...i,
								name:i[this.name_key],
								value:i[this.value_key],
							}
						})
						this.computecheckIndex();
					}else{
						this.range_list=[];
					}
					// console.log(88888,this.range_list)
				},
				immediate:true
			},
			'value':{
				handler(newV,oldV){
					// console.log(888,newV,this.range_list)
					if(newV){
						this.computecheckIndex();
					}
				},
				immediate:true
			}
		},
		methods: {
			computecheckIndex(){
				this.checkIndex = this.range_list.findIndex(i=>i.value==this.value);
			},
			change(e){
				// console.log('change',e,this.range_list[e.detail.value]);
				this.checkIndex = e.detail.value;
				this.$emit('input',this.range_list[e.detail.value].value);
				this.$emit('change',this.range_list[e.detail.value].value);
			}
		}
	}
</script>

<style lang="less" scoped>
	
</style>